import Basic from "../../../_samples/fiori/MediaGallery/Basic/Basic.md";
import Interactive from "../../../_samples/fiori/MediaGallery/Interactive/Interactive.md";
import Horizontal from "../../../_samples/fiori/MediaGallery/Horizontal/Horizontal.md";
import ThumbnailCustom from "../../../_samples/fiori/MediaGallery/ThumbnailCustom/ThumbnailCustom.md";
import VideoContent from "../../../_samples/fiori/MediaGallery/VideoContent/VideoContent.md";
import Vertical from "../../../_samples/fiori/MediaGallery/Vertical/Vertical.md";
import WithSelectedItem from "../../../_samples/fiori/MediaGallery/WithSelectedItem/WithSelectedItem.md";
import WithDisabledItem from "../../../_samples/fiori/MediaGallery/WithDisabledItem/WithDisabledItem.md";

<%COMPONENT_OVERVIEW%>

## Basic Sample
<Basic />

<%COMPONENT_METADATA%>

## More Samples

### Vertical Layout
The thumbnails and selected item are vertically placed. To enable this layout - set <b>layout="Vertical"</b>. 

<Vertical />

### Horizontal Layout
The thumbnails and selected item are vertically placed. To enable this layout - set <b>layout="Horizontal"</b>. 
Furthermore, you can also define on which side of the selected item you preffer to place the thumnails.
For instance, setting <b>menu-horizontal-align="Right"</b> will place the thumbnails on the rigtht.

<Horizontal />

### Custom Thumbnail
By default the image, passed to the MediaGalleryItem, is reused as a thumbnail that the user clicks.
However, you can display another image as thumbnail via the <b>thumbnail</b> slot of the  <b>MediaGalleryItem</b>.

<ThumbnailCustom />

### Selected Item
You can predefine the selected item.

<WithSelectedItem />

### Disabled Item
The MediaGallery can show diasbled items as well. In this sample, the first item is disabled and second is shown.

<WithDisabledItem />

### Interactive Display Area
Setting <b>interactiveDisplayArea</b> property makes the diplay area (where the media content is displayed) interactive, e.g. clickable.
In the sample, clicking on the  diplay area fires an event, and in this case we show a dialog, but the application can do whatever suitable in the given scenario.

<Interactive />

### Show Video Content
<VideoContent />